<template>
  <view class="content">
    <view v-if="state.loading"></view>
    <view class="no-data t-c" v-else-if="!state.dataSource.length">
      <image class="img" src="../../static/no-data.svg"></image>
      <view class="gray9 fz30">暂无订单</view>
    </view>
    <template v-else>
      <!-- 订单列表 -->
      <view
        class="info fz30 bg-white bdr20"
        v-for="item in state.dataSource"
        :key="item.id"
        @click="$jump.navigateTo(`/pages/take/details?orderId=${item.orderId}`)"
      >
        <view
          class="title item flex fz32 flex-x-between"
          :class="
            orderStatus[item.orderStatus]
              ? orderStatus[item.orderStatus][1]
              : ''
          "
        >
          <view>{{
            orderStatus[item.orderStatus]
              ? orderStatus[item.orderStatus][0]
              : ""
          }}</view>
          <view v-if="item.orderStatus === 2">{{
            $filter.timeDifference(item.usedTime)
          }}</view>
        </view>
        <view class="item flex fz32 flex-x-between">
          <view>订单编号:</view>
          <view>{{ item.orderId }}</view>
        </view>
        <view class="item flex fz32 flex-x-between">
          <view>支付金额:</view>
          <view>{{ item.orderAmount / 100 }}元</view>
        </view>
        <view class="item flex fz32 flex-x-between">
          <view>寄存网点:</view>
          <view class="main-theme-color">{{ item.networkName }}</view>
        </view>
        <view class="item flex fz32 flex-x-between">
          <view>寄存柜子</view>
          <view class="main-theme-color">{{ item.otherName }}</view>
        </view>
        <view class="item flex fz32 flex-x-between">
          <view>下单时间</view>
          <view>{{ item.createTime }}</view>
        </view>
        <view
          class="item flex fz32 flex-x-between"
          v-if="item.orderStatus === 7"
        >
          <view></view>
          <view
            ><button
              size="mini"
              class="btn-orange fff"
              @click.stop="onCloseOrder(item.orderId)"
            >
              关闭订单
            </button></view
          >
        </view>
      </view>
    </template>
  </view>
</template>

<script setup>
import { reactive, getCurrentInstance } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { queryUserOrder, openCell } from "@/common/js/getData.js";

const orderStatus = {
  0: ["未支付", "blue"],
  1: ["进行中", "blue"],
  2: ["已支付", "green"],
  3: ["已取消", "gray9"],
  4: ["退款中", "blue"],
  5: ["已退款", "red"],
  6: ["已结束", "gray9"],
  7: ["已超时", "red"],
};

const { proxy } = getCurrentInstance();

const state = reactive({
  loading: true,
  isSend: false,
  dataSource: [],
});

// 页面加载完成
onLoad(async () => {
  await proxy.$onLaunched;
  loadData();
});

// 获取数据
const loadData = () => {
  queryUserOrder()
    .then((res) => {
      state.dataSource = res.result;
    })
    .finally(() => {
      state.loading = false;
    });
};

// 开柜
const onOpen = (orderId) => {
  if (state.isSend) {
    return;
  }
  state.isSend = true;
  const data = {
    orderId,
    midwayPick: true,
  };
  openCell(data)
    .then((res) => {
      uni.showToast({
        icon: "success",
        title: res.message,
      });
      loadData({ hideLoad: true });
    })
    .finally(() => {
      state.isSend = false;
    });
};

// 结束订单
const onCloseOrder = (orderId) => {
  if (state.isSend) {
    return;
  }
  state.isSend = true;
  const data = {
    orderId,
  };
  closeOrder(data)
    .then((res) => {
      uni.showToast({
        icon: "success",
        title: res.message,
      });
      loadData({ hideLoad: true });
    })
    .finally(() => {
      state.isSend = false;
    });
};
</script>

<style lang="less" scoped>
@import url("@/common/less/common.less");

.info {
  line-height: 50rpx;
  padding: 40rpx;
  margin: 20rpx;

  .item {
    padding: 10rpx 0;
  }

  .title {
    border-bottom: 2rpx solid #eee;
    padding: 0 0 20rpx 0;
    margin-bottom: 20rpx;
  }
}
</style>
